<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: lxc
  Date: 2022/12/1
  Time: 8:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    pageContext.setAttribute("basePath", basePath);
%>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>Flat Login Form</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

    <link rel="stylesheet" href="css/style.css">


</head>

<body>


<div class="container">
    <div class="info">
        <h1>拼刀刀</h1><span>拼刀刀<i class="fa fa-heart">与你同在</i></span>
    </div>
</div>
<div class="form">
    <div class="thumbnail"><img src="css/hat.svg"/></div>
    <form class="login-form" method="post" action="UserServlet">
        <input autocomplete="new-pwd" maxlength="10" id="value" onfocus="shoeTips('hint','账号长度不能小于六')" onkeyup="hint()"
               type="text" class="form-control" placeholder="不能小于六位只能字母与数字" name="Username">
        <input type="text" maxlength="10" name="name" placeholder="用户名不能超过十个汉字">
        <div style="height: 16px"><span id="hint"></span></div>
        <input maxlength="16" class="form-control" id="pass_value" onfocus="shoeTips('pass_hint','密码长度不能小于六')"
               onkeyup="checkPass()" type="password" name="password" placeholder="请输入密码密码要包含字母字符并且8-16位"/>
        <div style="height: 16px" id="pass_hint"></div>
        <input maxlength="16" class="form-control" id="passpass_value" onfocus="shoeTips('passpass_hint','两次密码要一致')"
               onkeyup="checkPassPass()" type="password" name="password1" placeholder="请二次输入密码"/>
        <div style="height: 16px" id="passpass_hint"></div>
        <div>
            性别:
            <input type="radio" style="display: inline-block;width: 20px" name="sex" value="男" checked/>男
            <input type="radio" style="display: inline-block;width: 20px" name="sex" value="女"/>女
        </div>
        <br>
           年龄: <select name="age" style="width: 64px;height: 25px;background: #f2f2f2;border: none" id="sel-opt"
                    onchange="gradeChange()">
                <%
                    for (int i = 16; i <= 110; i++) {

                %>
                <option value="<%=i%>"><%=i%>
                </option>
                <% }%>
            </select>
            <script type="text/javascript">

                function hint() {
                    var value = document.getElementById("value").value;
                    var hint = document.getElementById("hint");
                    if (/.*[\u4e00-\u9fa5]+.*$/.test(value)){
                        hint.innerHTML = "不能含有汉字";
                        return false ;
                    }
                    if (value.length < 6) {
                        hint.innerHTML = "用户名太短";
                        return false;
                    } else {
                        hint.innerHTML = null;
                        return true;
                    }
                }

                /**
                 * 校验密码
                 */

                function checkPass() {
                    var value = document.getElementById("pass_value").value;
                    var hint = document.getElementById("pass_hint");
                    var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,16}');

                    if (!pwdRegex.test(value)) {
                        hint.innerHTML = "（密码中必须包含字母、数字、特殊字符）或者长度小于8，请及时修改密码！";
                        return false;
                    } else {
                        hint.innerHTML = null;
                        return true;
                    }
                }

                /***
                 * 确认密码的校验
                 */
                function checkPassPass() {
                    var papavalue = document.getElementById("passpass_value").value;
                    var value = document.getElementById("pass_value").value;
                    var papahint = document.getElementById("passpass_hint");
                    if (papavalue !== value) {
                        papahint.innerHTML = "两次密码不一致";
                        return false;
                    } else {
                        papahint.innerHTML = null;
                        return true;
                    }
                }

                function email(){
                    var email = document.getElementById("email_value").value;
                    var hint = document.getElementById("email_hint");
                    var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                    if (reg.test(email)) {
                        hint.innerHTML = null;
                        return false;
                    } else {
                        hint.innerHTML = "邮箱格式不正确";
                        return true;
                    }
                }

                function phone() {
                    var phone = document.getElementById("phone_value").value;
                    var hint = document.getElementById("phone_hint")
                    var reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                    if (reg.test(phone)) {
                        hint.innerHTML = null
                        return false;
                    } else {
                        hint.innerHTML = "手机号格式错误"
                        return true;
                    }
                }
                function checkForm() {
                    return checkPass() && checkPassPass() && hint() && email()&&phone();
                }
            </script>
        <div style="height: 16px"></div>
        <div style="height: 16px"></div>
        <input type="email" placeholder="请输入邮箱" id="email_value" name="email1" onkeyup="email()">
        <div style="height: 16px"><span id="email_hint"></span></div>
        <input type="text" placeholder="请输入地址" name="address">
        <div style="height: 16px"></div>
        <input type="text" maxlength="11" placeholder="请输入手机号" id="phone_value" name="phone1" onkeyup="phone()">
        <div style="height: 16px"><span id="phone_hint"></span></div>
        <span>请输入验证码: </span><input maxlength="5" type="text" name="DrawImg" placeholder="看不清？点击验证码刷新"
                                    autocomplete="new-pwd">

        <img src="DrawImg" onclick="change()" readonly="true" id="codeImg" alt="">
        <br>
        <script type="text/javascript">
            function change() {
                var date = new Date().getTime();
                document.getElementById("codeImg").src = "DrawImg?" + date;
            }
        </script>
        <button type="submit" name="action" value="enroll">注册</button>
        <p class="message">已有账号？ <a href="Sign_in_to_register/index2.jsp">点击登录</a></p>
    </form>
</div>
<script src='js/jquery.min.js'></script>

<script src="js/index.js"></script>
</body>
</html>
